<div class="container" fxLayout="column" fxLayoutGap="6px">

    <div style="font-size: 12px;">
        <mat-form-field appearance="outline">
          <mat-label>Blockchain</mat-label>
          <mat-select [formControl]="blockChain">
            <mat-option value="ethereum">Ethereum</mat-option>
            <mat-option value="solana">Solana</mat-option>
            <mat-option value="solana-metaplex">Solana Metaplex</mat-option>
            <mat-option value="cardano">Cardano</mat-option>
          </mat-select>
          <mat-hint align="end" style="color:#adadad">Used for metadata generation</mat-hint>
        </mat-form-field>
      </div>


    <div style="font-size: 12px;">
        <mat-form-field appearance="outline">
          <mat-label>Art base name</mat-label>
          <input matInput placeholder="Art #" type="text" maxlength="100" [formControl]="nftBaseName" >
          <mat-error *ngIf="nftBaseName.invalid">Enter valid name (max length 100)</mat-error>
        </mat-form-field>
      </div>


      <div style="font-size: 12px;" matTooltip="Use {name} to add your NFT name dynamically to your description">
        <mat-form-field appearance="outline">
          <mat-label>Description</mat-label>
          <textarea  matInput placeholder="{name} - Generated by Appsus NFT Art Generator." type="text" [formControl]="nftDescription"
          cdkTextareaAutosize
          cdkAutosizeMinRows="5"
          cdkAutosizeMaxRows="5"
          ></textarea>
          <mat-error *ngIf="nftDescription.invalid">Enter valid description</mat-error>
        </mat-form-field>
      </div>


      <div style="font-size: 12px;" *ngIf="blockChain.value !== 'cardano'" matTooltip="Used for setting where royalties are paid to">
        <mat-form-field appearance="outline">
          <mat-label>Creator wallet address</mat-label>
          <input matInput placeholder="0x0000000000000000000000000000000000000000" maxlength="50" type="text" [formControl]="creatorAddress" >
          <mat-error *ngIf="creatorAddress.invalid">Enter valid address (max length 50)</mat-error>
        </mat-form-field>
      </div>


      <div style="font-size: 12px;" *ngIf="blockChain.value !== 'cardano'" matTooltip="Set royalties percentage">
        <mat-form-field appearance="outline">
          <mat-label>Royalties fee</mat-label>
          <input matInput placeholder="25" min="0" max="100" step="0.01"
          appTwoDigitDecimalNumber type="textbox"
          [formControl]="royaltiesFee"
          >
          <span matSuffix class="light-text">%</span>
          <mat-error *ngIf="royaltiesFee.invalid">Enter valid percentage (0 - 100)</mat-error>
        </mat-form-field>
      </div>


      <div *ngIf="blockChain.value === 'solana'" style="font-size: 12px;" >
        <mat-form-field appearance="outline" matTooltip="Used for grouping NFTs into collections on Solana">
          <mat-label>Collection name</mat-label>
          <input matInput placeholder="Appsus NFTs" type="text" maxlength="100" [formControl]="collectionName" >
          <mat-error *ngIf="collectionName.invalid">Enter valid collection name (max length 100)</mat-error>
        </mat-form-field>
      </div>


      <div *ngIf="blockChain.value === 'solana'" style="font-size: 12px;" >
        <mat-form-field appearance="outline" matTooltip="Symbol used by Solana">
          <mat-label>Symbol</mat-label>
          <input matInput placeholder="APS" type="text" maxlength="10" [formControl]="solanaSymbol" >
          <mat-error *ngIf="solanaSymbol.invalid">Enter valid collection name (max length 10)</mat-error>
        </mat-form-field>
      </div>

      <div *ngIf="blockChain.value === 'cardano'" style="font-size: 12px;" matTooltip="Used for setting where royalties are paid to">
        <mat-form-field appearance="outline">
          <mat-label>PolicyID</mat-label>
          <input matInput type="text" [formControl]="cardanoPolicyId" >
        </mat-form-field>
      </div>

      <hr style="width: 100%; border-color: #ffffff40;">

      <div fxLayout="row" fxLayoutAlign="start center">
        <div style="font-size: 12px; margin-top: 18px;" matTooltip='Update metadata "image" property *must have generated metadata already'>
          <mat-form-field appearance="outline">
            <mat-label>Base image address</mat-label>
            <input matInput type="text" placeholder="ipfs://QmTX1SQBBk1sHqNbMsNNYC1cmUzixFgGqX3FuJKoNBbffv" [formControl]="baseImageAddress" >
          </mat-form-field>
        </div>
        <button mat-icon-button (click)="updateImageMetadata()" ><mat-icon style="color: #f0f0f0" matTooltip="Select metadata foler and update metadata">add</mat-icon></button>
      </div>





</div>
